{extend name="../../admin/view/main"}

{block name='content'}
<div class="think-box-shadow portal-block-container notselect">
    <form class="layui-form layui-form-pane form-search" action="{:request()->url()}" onsubmit="return false" method="get" autocomplete="off">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">门店</label>
            <div class="layui-input-inline">
                <select class="layui-select" name="shop_id" lay-search>
                    <option value="0">全部</option>
                    {foreach $shopList as $key => $vo}
                    <option {if input('get.shop_id') eq $vo.id} selected {/if} value="{$vo.id}">{$vo.name}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 筛 选</button>
        </div>
    </form>
    <script>form.render()</script>
</div>


<div class="layui-row layui-col-space15 margin-top-10">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="think-box-shadow">
            <div class="line-type">
                <div class="hb">环比</div>
                <div class="tb">同比</div>
                <input type="hidden" id="angle" value="hb">
            </div>
            <div class="line-time">
                <div data-value="day" id="day">今天</div>
                <div data-value="week" id="week">近七天</div>
                <div data-value="month" id="month">近30天</div>
                <!--<div>全年</div>-->
                <input type="hidden" id="stage" value="day">
            </div>
            <div id="main" style="width:100%;height:450px"></div>
        </div>
    </div>

</div>

<label class="layui-hide">
    <input type="text" id="ageData" value="">
</label>

<style>
    .line-time {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    #day {
        color: red;
    }
    .line-time div {
        padding: 3px 5px;
        cursor:pointer
    }
    .line-time div:nth-child(1){
        margin-right:20px;
    }
    .line-time div:nth-child(2){
        margin-right:20px;
    }
    .line-time div:nth-child(3){
        margin-right:20px;
    }
    .line-type {
        width: 100%;
        display: flex;
    }
    .line-type div {
        cursor:pointer
    }
    .hb {
        width: 50px;
        height: 25px;
    }
    .tb {
        width: 50px;
        height: 25px;
    }
    .hb {
        color: red;
    }
</style>

<script>
    var angle = 'hb';
    var shop_id = getQueryVariable('shop_id');
    getData('day', angle, shop_id);

    $('#day').click(function () {
        angle = $('#angle').val();
        getData('day', angle, shop_id);
        $('.line-time div').css('color', '#000');
        $(this).css('color', 'red');
        $('#stage').val('day');
    });

    $('#week').click(function () {
        angle = $('#angle').val();
        getData('week', angle, shop_id);
        $('.line-time div').css('color', '#000');
        $(this).css('color', 'red');
        $('#stage').val('week');
    });

    $('#month').click(function () {
        angle = $('#angle').val();
        getData('month', angle, shop_id);
        $('.line-time div').css('color', '#000');
        $(this).css('color', 'red');
        $('#stage').val('month');
    });

    var stage = '';
    $('.tb').click(function () {
        stage = $('#stage').val();
        getData(stage, 'tb', shop_id);
        $('.line-type div').css('color', '#000');
        $(this).css('color', 'red');
        $('#angle').val('tb');
    });

    $('.hb').click(function () {
        angle = $('#stage').val();
        getData(angle, 'hb', shop_id);
        $('.line-type div').css('color', '#000');
        $(this).css('color', 'red');
        $('#angle').val('hb');
    });

    function getData(stage, angle, shop_id){
        $.ajax({
            url: '{:url("admin/Analyse/getPassengerFlow")}',
            type: 'get',
            dataType: 'json',
            data: {
                'stage': stage,
                'angle': angle,
                'shop_id': shop_id
            },
            success: res => {
                if (res.code == '200') {
                    console.log(res.data);
                    var data = res.data;
                    display(data.title, data.abscissa, data.now_line, data.prev_line);
                } else {
                    layer.msg(res.msg);
                }
            }
        });
    }

    //获取url参数
    function getQueryVariable(variable)
    {
        var url = window.location.href;
        var query = url.split('?')[1];
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){
                return pair[1];
            }
        }
        return 0;
    }

    /**
     * 渲染 ECharts
     * @param title
     * @param rowData
     * @param lineData1
     * @param lineData2
     */
    function display(title, rowData, lineData1, lineData2) {
        require(['echarts'], function (echarts) {
            var chart = echarts.init(document.getElementById('main'));
            var option = {
                title: {
                    text: '访客数'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: title
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: rowData
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: title[0],
                        type: 'line',
                        stack: '数量',
                        data: lineData1
                    },
                    {
                        name: title[1],
                        type: 'line',
                        stack: '数量',
                        data: lineData2
                    }
                ]
            };
            chart.setOption(option);
        });
    }
</script>

{/block}
